<template>
  <el-dialog
    title="新增申请干部"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
  >
    <el-card style="width: 100%">
      <h2>查阅申请干部</h2>
      <el-form ref="form" label-width="140px">
        <el-form-item label="查询姓名或身份证号">
          <el-input
            placeholder="多个身份证号和姓名用逗号隔开"
            v-model="nameOrCard"
            style="width: 460px"
          ></el-input>
          &emsp;<el-button
            icon="el-icon-search"
            type="primary"
            plain
            @click="searchId"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-row style="display: flex">
            <el-col :span="10" style="width: 500px; border: 1px solid #ebeef5">
              <div
                style="
                  padding: 5px 15px 10px;
                  background-color: #f5f7fa;
                  border-radius: 3px;
                "
              >
                <div>未选列表</div>
                <!-- <span style="float: right;">{{ listArr.length }}</span> -->
                <vxe-table
                  :data="listArr"
                  style="width: 100%"
                  border
                  height="393"
                  @checkbox-all="checkAll"
                  @checkbox-change="checkAll"
                >
                  <vxe-column type="checkbox" width="60"></vxe-column>
                  <vxe-column
                    align="center"
                    field="xingming"
                    title="姓名"
                    width="150"
                  ></vxe-column>
                  <vxe-column
                    align="left"
                    field="zhiwu_jiancheng"
                    title="工作单位及职务"
                  ></vxe-column>
                </vxe-table>
              </div>
            </el-col>
            <el-col
              :span="3"
              style="
                width: 80px;
                padding: 0 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
              "
            >
              <!--穿梭框选中-->
              <div style="display: flex; justify-content: center">
                <el-button
                  class="middle-circle"
                  icon="el-icon-arrow-right"
                  :disabled="!leftData.length"
                  size="mini"
                  type="primary"
                  @click="handelSelect"
                />
              </div>
              <!--穿梭框取消-->
              <div style="display: flex; justify-content: center">
                <el-button
                  class="middle-circle"
                  icon="el-icon-arrow-left"
                  :disabled="!rightData.length"
                  size="mini"
                  type="primary"
                  style="margin-top: 10px; margin-left: 0px"
                  @click="handleRemoveSelect"
                />
              </div>
            </el-col>
            <el-col :span="10" style="width: 500px; border: 1px solid #ebeef5">
              <div
                style="
                  padding: 5px 15px 10px;
                  background-color: #f5f7fa;
                  border-radius: 3px;
                "
              >
                <div>已选列表</div>
                <!-- <span style="float: right;">{{ selectArr.length }}</span> -->
                <vxe-table
                  :data="selectArr"
                  style="width: 100%"
                  border
                  height="393"
                  highlight-current-row
                  @current-change="handleCurrentRow"
                >
                  <vxe-column title="序号" type="seq" width="60"></vxe-column>
                  <vxe-column
                    align="center"
                    field="xingming"
                    title="姓名"
                    width="150"
                  ></vxe-column>
                  <vxe-column
                    align="left"
                    field="zhiwu_jiancheng"
                    title="工作单位及职务"
                  ></vxe-column>
                </vxe-table>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="width: 100%">
      <h2>查阅申请内容</h2>
      <el-form ref="form" :model="form" label-width="120px">
        <!-- 查阅第一人 -->
        <el-row>
          <el-col :span="4">
            <el-form-item label="第一查阅人:">
              <el-input
                placeholder="请输入姓名"
                v-model="firstPersonName"
                style="width: 100px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label-width="0px"
              prop="firstPersonIdcard"
              :rules="[
                {
                  required: true,
                  message: '请输入正确的身份证号',
                  trigger: 'blur',
                },
                { validator: validateFirstPersonIdcard, trigger: 'blur' },
              ]"
            >
              <el-input
                placeholder="请输入身份证号"
                v-model="form.firstPersonIdcard"
                style="width: 230px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label-width="0px"
              prop="firstPersonNumber"
              :rules="[
                {
                  required: true,
                  message: '请输入正确的手机号',
                  trigger: 'blur',
                },
                { validator: validateFirstPersonNumber, trigger: 'blur' },
              ]"
            >
              <el-input
                placeholder="请输入手机号"
                v-model="form.firstPersonNumber"
                style="width: 230px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="0px">
              <el-input
                placeholder="请输入工作单位及职务"
                v-model="firstPersonWord"
                style="width: 360px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-select
                v-model="firstPersonFace"
                placeholder="请选择政治面貌"
                style="width: 230px"
              >
                <el-option
                  v-for="item in firstPersonFaceList"
                  :key="item.itemCode"
                  :label="item.itemName"
                  :value="item.itemCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 查阅第二人 -->
        <el-row>
          <el-col :span="4">
            <el-form-item label="第二查阅人:">
              <el-input
                placeholder="请输入姓名"
                v-model="secondPersonName"
                style="width: 100px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label-width="0px"
              prop="secondPersonIdCard"
              :rules="[
                {
                  required: true,
                  message: '请输入正确的身份证号',
                  trigger: 'blur',
                },
                { validator: validateSecondPersonIdCard, trigger: 'blur' },
              ]"
            >
              <el-input
                placeholder="请输入身份证号"
                v-model="form.secondPersonIdCard"
                style="width: 230px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item
              label-width="0px"
              prop="secondPersonNumber"
              :rules="[
                {
                  required: true,
                  message: '请输入正确的手机号',
                  trigger: 'blur',
                },
                { validator: validateSecondPersonNumber, trigger: 'blur' },
              ]"
            >
              <el-input
                placeholder="请输入手机号"
                v-model="form.secondPersonNumber"
                style="width: 230px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="0px">
              <el-input
                placeholder="请输入工作单位及职务"
                v-model="secondPersonWord"
                style="width: 360px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label-width="10px">
              <el-select
                v-model="secondPersonFace"
                placeholder="请选择政治面貌"
                style="width: 230px"
              >
                <el-option
                  v-for="item in secondPersonFaceList"
                  :key="item.itemCode"
                  :label="item.itemName"
                  :value="item.itemCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="查阅事由">
          <el-select
            v-model="applyContent"
            placeholder="请选择查阅事由"
            style="width: 230px"
          >
            <el-option
              v-for="item in applyContentList"
              :key="item.itemCode"
              :label="item.itemName"
              :value="item.itemCode"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查阅类型">
          <el-radio v-model="searchType" label="1">仅查阅</el-radio>
          <el-radio v-model="searchType" label="2">查阅并打印</el-radio>
        </el-form-item>
        <el-form-item label="查阅内容">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkedAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="checkedSearch"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox
              v-for="item in searchContent"
              :label="item.itemCode"
              :key="item.itemCode"
              >{{ item.itemName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="上传附件">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :on-success="uploadSuccess"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            :multiple="fileMultiple"
            :before-upload="beforeUpload"
            :limit="1"
            :file-list="fileList"
          >
            <el-button size="small" type="primary"> 点击上传 </el-button>
            <div slot="tip" class="el-upload__tip">
              允许上传pdf格式,且不超过100MB
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onTemporary">暂 存</el-button>
      <el-button type="primary" @click="onSubmit">提 交</el-button>
    </span>
  </el-dialog>
</template>
  
  <script>
import {
  getPersonByNamesIdCards,
  searchSave,
  dictionaryList,
} from "@/api/datacentersg/achives/documentApi";
import store from "@/store";
import webapp from "@/config/webapp";
export default {
  data() {
    return {
      dialogVisible: false,
      applyContent: "",
      applyContentList: [],
      fileUrl: "",
      nameOrCard: "", //查身份证号
      searchParam: {},
      form: {
        firstPersonIdcard: "",
        firstPersonNumber: "",
        secondPersonIdCard: "",
        secondPersonNumber: "",
      },
      listArr: [],
      selectArr: [],
      changeArr: [],
      leftData: [], // 左边选中列表数据
      rightData: [], // 右边选中列表数据
      leftList: [],
      uploadUrl: webapp.uploadUrl,
      fileMultiple: false,
      fileList: [],
      firstPersonName: "",

      firstPersonWord: "",
      firstPersonFace: "",
      firstPersonFaceList: [],
      secondPersonName: "",

      secondPersonWord: "",
      secondPersonFace: "",
      secondPersonFaceList: [],
      searchType: "1",
      searchContent: [],
      checkedAll: false,
      isIndeterminate: false,
      checkedSearch: [],
    };
  },
  created() {
    this.dictionaryList();
  },
  methods: {
    init() {
      this.dialogVisible = true;
      this.handleClear();
      this.dictionaryList();
      this.dictionaryListContent();
      this.dictionaryListType();
    },
    validateFirstPersonIdcard(rule, value, callback) {
      if (!/^\d{17}[\dXx]$/.test(value)) {
        callback(new Error("请输入正确的身份证号"));
      } else {
        // 校验通过时手动调用callback()来清除错误提示
        callback();
      }
    },
    validateFirstPersonNumber(rule, value, callback) {
      if (!/^\d{11}$/.test(value)) {
        callback(new Error("手机号必须为11位数字"));
      } else {
        callback();
      }
    },
    validateSecondPersonIdCard(rule, value, callback) {
      if (!/^\d{17}[\dXx]$/.test(value)) {
        callback(new Error("请输入正确的身份证号"));
      } else {
        // 校验通过时手动调用callback()来清除错误提示
        callback();
      }
    },
    validateSecondPersonNumber(rule, value, callback) {
      if (!/^\d{11}$/.test(value)) {
        callback(new Error("手机号必须为11位数字"));
      } else {
        callback();
      }
    },
    handleCurrentRow(currentRow) {
      this.rightData = [currentRow.row];
    },
    searchId() {
      let sfzh = "";
      sfzh = this.nameOrCard;
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          sfzhs: sfzh,
        },
      };
      getPersonByNamesIdCards(params).then((result) => {
        if (result.result) {
          this.listArr = result.resultdata;
        }
      });
    },
    // 全选
    handleCheckAllChange(val) {
      if (val) {
        this.checkedSearch = this.searchContent.map((e) => {
          return e.itemCode;
        });
      } else {
        this.checkedSearch = [];
        this.isIndeterminate = false;
      }
    },
    // 单选
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkedAll = checkedCount === this.searchContent.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.searchContent.length;
    },
    checkAll({ checked, records }) {
      this.leftData = records;
    },
    // 穿梭框选中
    handelSelect() {
      for (let i = 0; i < this.selectArr.length; i++) {
        for (let j = 0; j < this.leftData.length; j++) {
          if (this.leftData[j].person_id === this.selectArr[i].person_id) {
            this.leftData = []; // 避免 左边勾选内容 leftData 与 右边内容 selectArr 重复
          }
        }
      }
      this.leftList = this.leftData;
      this.selectArr = this.handleConcatArr(this.selectArr, this.leftData);
      this.handleRemoveTabList(this.leftData, this.listArr);
      this.leftData = [];
    },
    // 穿梭框取消
    handleRemoveSelect() {
      this.listArr = this.handleConcatArr(this.listArr, this.rightData);
      this.handleRemoveTabList(this.rightData, this.selectArr);
      this.rightData = [];
    },
    handleConcatArr(selectArr, leftData) {
      let arr = [];
      arr = arr.concat(selectArr, leftData);
      return arr;
    },
    handleRemoveTabList(isNeedArr, originalArr) {
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            if (isNeedArr[i]["person_id"] === originalArr[k]["person_id"]) {
              originalArr.splice(k, 1);
            }
          }
        }
      }
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    uploadSuccess(response, file, fileList) {
      if (response.success) {
        this.fileUrl = response.url;
      }
    },
    beforeUpload(file) {
      const fileType = file.name.substring(file.name.lastIndexOf(`.`) + 1);
      let isPassType = false;
      if (fileType == `pdf` || fileType == `PDF`) {
        isPassType = true;
      }
      const isLt100M = file.size / 1024 / 1024 < 100;
      if (!isPassType) {
        this.$message.error(`文件类型只能是 pdf 格式!`);
      }
      if (!isLt100M) {
        this.$message.error(`上传文件大小不能超过 100MB!`);
      }
      return isPassType && isLt100M;
    },
    // 政治面貌字典
    dictionaryList() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          code: "GB4762",
        },
      };
      dictionaryList(params).then((result) => {
        this.firstPersonFaceList = result.resultdata;
        this.secondPersonFaceList = result.resultdata;
      });
    },
    // 查阅事由字典
    dictionaryListContent() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          code: "ARCHIVE01",
        },
      };
      dictionaryList(params).then((result) => {
        this.applyContentList = result.resultdata;
      });
    },
    // 查阅内容分类字典
    dictionaryListType() {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        data: {
          code: "ARCHIVE02",
        },
      };
      dictionaryList(params).then((result) => {
        this.searchContent = result.resultdata;
      });
    },
    // 暂存
    onTemporary() {
      if (
        !this.firstPersonName ||
        !this.form.firstPersonIdcard ||
        !this.form.firstPersonNumber ||
        !this.firstPersonWord ||
        !this.firstPersonFace
      ) {
        this.$message({
          message: "请填写完整查阅第一人信息",
          type: "warning",
        });
      } else if (
        !this.secondPersonName ||
        !this.form.secondPersonIdCard ||
        !this.form.secondPersonNumber ||
        !this.secondPersonWord ||
        !this.secondPersonFace
      ) {
        this.$message({
          message: "请填写完整查阅第二人信息",
          type: "warning",
        });
      } else if (this.selectArr.length === 0) {
        this.$message({
          message: "请选择一个人员",
          type: "warning",
        });
      } else {
        // 其他提交逻辑
        const personList = this.selectArr.map((item) => {
          return {
            personId: item.person_id,
            personName: item.xingming,
            jobShort: item.zhiwu_jiancheng,
            idCard: item.sfzh,
          };
        });
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            applyContent: this.applyContent,
            personList: personList,
            fileUrl: this.fileUrl,
            applyFirstPersonName: this.firstPersonName,
            applyFirstPersonIdCard: this.form.firstPersonIdcard,
            applyFirstPersonJob: this.firstPersonWord,
            applyFirstPersonPhone: this.form.firstPersonNumber,
            applyFirstPersonPolitical: this.firstPersonFace,
            applySecondPersonName: this.secondPersonName,
            applySecondPersonIdCard: this.form.secondPersonIdCard,
            applySecondPersonJob: this.secondPersonWord,
            applySecondPersonPhone: this.form.secondPersonNumber,
            applySecondPersonPolitical: this.secondPersonFace,
            applyType: this.searchType, //查阅类型
            applyContents: this.checkedSearch.join(","), //查阅内容
            auditState: 0,
          },
        };
        searchSave(params).then((result) => {
          if (result.result) {
            this.dialogVisible = false;
            this.$emit("initData");
          }
        });
      }
    },
    // 提交
    onSubmit() {
      if (
        !this.firstPersonName ||
        !this.form.firstPersonIdcard ||
        !this.form.firstPersonNumber ||
        !this.firstPersonWord ||
        !this.firstPersonFace
      ) {
        this.$message({
          message: "请填写完整查阅第一人信息",
          type: "warning",
        });
      } else if (
        this.form.firstPersonIdcard &&
        this.form.secondPersonIdCard &&
        this.form.firstPersonIdcard === this.form.secondPersonIdCard
      ) {
        this.$message({
          message: "查阅第一人和查阅第二人身份证号不能一致",
          type: "warning",
        });
      } else if (!this.fileUrl) {
        this.$message({
          message: "上传附件不能为空",
          type: "warning",
        });
      } else if (
        !this.secondPersonName ||
        !this.form.secondPersonIdCard ||
        !this.form.secondPersonNumber ||
        !this.secondPersonWord ||
        !this.secondPersonFace
      ) {
        this.$message({
          message: "请填写完整查阅第二人信息",
          type: "warning",
        });
      } else if (this.selectArr.length === 0) {
        this.$message({
          message: "请选择一个人员",
          type: "warning",
        });
      } else {
        // 其他提交逻辑
        const personList = this.selectArr.map((item) => {
          return {
            personId: item.person_id,
            personName: item.xingming,
            jobShort: item.zhiwu_jiancheng,
            idCard: item.sfzh,
          };
        });
        const params = {
          userId: store.getters.user_id.toString(),
          token: store.getters.token.toString(),
          data: {
            applyContent: this.applyContent,
            personList: personList,
            fileUrl: this.fileUrl,
            applyFirstPersonName: this.firstPersonName,
            applyFirstPersonIdCard: this.form.firstPersonIdcard,
            applyFirstPersonJob: this.firstPersonWord,
            applyFirstPersonPhone: this.form.firstPersonNumber,
            applyFirstPersonPolitical: this.firstPersonFace,
            applySecondPersonName: this.secondPersonName,
            applySecondPersonIdCard: this.form.secondPersonIdCard,
            applySecondPersonJob: this.secondPersonWord,
            applySecondPersonPhone: this.form.secondPersonNumber,
            applySecondPersonPolitical: this.secondPersonFace,
            applyType: this.searchType, //查阅类型
            applyContents:
              this.checkedSearch.length > 0 ? this.checkedSearch.join(",") : "", //查阅内容
            auditState: 1,
          },
        };
        searchSave(params).then((result) => {
          if (result.result) {
            this.dialogVisible = false;
            this.$emit("initData");
          }
        });
      }
    },

    handleClear() {
      this.applyContent = "";
      this.fileUrl = "";
      this.nameOrCard = "";
      this.firstPersonName = "";
      this.form.firstPersonIdcard = "";
      this.form.firstPersonNumber = "";
      this.firstPersonWord = "";
      this.firstPersonFace = "";
      this.secondPersonName = "";
      this.form.secondPersonIdCard = "";
      this.form.secondPersonNumber = "";
      this.secondPersonWord = "";
      this.secondPersonFace = "";
      this.checkedSearch = [];
      this.fileList = [];
      this.checkedAll = false;
      this.isIndeterminate = false;
      // this.searchType = "";
      this.listArr = [];
      this.selectArr = [];
    },
    handleClose(done) {
      done();
    },
  },
};
</script>
  
  <style>
</style>